<template>
  <el-form ref="form" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="原密码" prop="oldPassword">
      <el-input
        v-model="user.oldPassword"
        placeholder="请输入原密码"
        type="password"
      />
    </el-form-item>
    <el-form-item label="新密码" prop="newPassword">
      <el-input
        v-model="user.newPassword"
        placeholder="请输入新密码，需要包含数字、大写字母、小写字母、特殊字符任意3种（8到20位）"
        type="password"
      />
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <el-input
        v-model="user.confirmPassword"
        placeholder="请确认密码"
        type="password"
      />
    </el-form-item>
    <el-form-item>
      <el-button v-preventReClick type="primary" size="mini" @click="submit">保存</el-button>
      <el-button v-preventReClick type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { motifyPwd } from '@/api'

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      test: '1test',
      user: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 表单校验
      rules: {
        oldPassword: [
          { required: true, message: '原密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          {
            min: 8,
            max: 20,
            message: '长度在 8 到 20 个字符',
            trigger: 'blur'
          },
          { pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,20}$/, message: '需要包含数字、大写字母、小写字母、特殊字符任意3种', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          motifyPwd({
            param: {
              userId: sessionStorage.getItem('userId'),
              oldpassword: this.user.oldPassword,
              newpassword: this.user.confirmPassword
            }
          }).then((res) => {
            if (res.errorCode !== '000000') return
            this.logout()
          }).catch(() => {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    close() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/' })
    },
    async logout() {
      this.$message.success('修改成功')
      const shopId = sessionStorage.getItem('shopId') || 1
      // const venueId = sessionStorage.getItem('venueId')
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?shopId=` + shopId)
    }
  }
}
</script>
